唉唷威，每天發的是不容易啊，寫不完整都會不想發。
目前還是新手訓練沒辦法回留言，但好像放個codepen上來也不錯膩。

練習重點：
處理陣列常用的方法

• filter()
• map()
• sort()
• reduce()

提供的陣列資料：

• inventors: 發明家的 first(名) last(姓) year(出生時間) passed(過世時間)

    const inventors = [
      { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
      { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
      { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
      { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
      { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
      { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
      { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
      { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
      { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
      { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
      { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
      { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
    ];

• people: 名字中間有逗號做間隔，並且字首大寫(firstName, lastName)

const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William'];

• data: 有重複的資料在裡面

const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck', 'pogostick'];

題目(1)篩選出出生在1500年間的發明家(year in 1500~1599)：

• 使用filter()過濾每筆inventor 為true的將會回傳到變數born裡成為新的陣列

    const born_ = inventors.filter(function(invent){
      if( invent.year >= 1500 && invent.year <= 1599 ) {
        return true;
      } else {
        return false;
      }
    });
    // ***array function寫法***
    const born = inventors.filter((invent) => invent.year >= 1500 && invent.year <= 1599);
    // console.table(born);

• filter()筆記：
  • filter(item, index, array)
  • 會回傳一個新陣列，透過過濾原陣列，保存值為true的，false則不保留
  • 適合用在搜尋符合條件的資料

// 沒有條件會是空陣列
var filterEmpty = people.filter(function(item, index, array){
});
console.log(filterEmpty); // []

題目(2)回傳所有inventor的全名(first + last)：

• 使用map()將last與first組合後回傳至變數fullName

    const fullName_ = inventors.map(function(inventor){
      return inventor.first + ' ' + inventor.last;
    });
    // ***array function寫法***
    const fullName = inventors.map((invent) => `${invent.first} ${invent.last}`);
    console.table(fullName);

• map()筆記：
  • map(item, index, array)
  • 與fillter很像，透過原陣列組合成一個新陣列，回傳數量等於原始陣列的長度
  • 如果不回傳則是 undefined
  • 適合將原始的變數運算後重新組合一個新的陣列

var mapEmpty = people.map(function(item, index, array){
});
console.log(mapEmpty);    // [undefined, undefined, undefined, undefined]

題目(3)依據生日小至大排序所有的inventor：

• 使用sort()透過比較，原地進行排序，並不會產生新陣列

const birthday_ = inventors.sort(function(a,b){
      if(a.year < b.year){
        return -1;
      } else {
        return 1;
      }
    });
// ***array function寫法***
const birthday = inventors.sort((a, b) => a.year < b.year ? -1 : 1);

• sort()筆記： 看得有點久ＱＱ
  • compare(a,b) 回傳值 < 0 則 [ a, b ]
  • compare(a,b) 回傳值 > 0 則 [ b, a ]
  • compare(a,b) 回傳值 = 0 則a,b位置不變
  • 詳細: https://goo.gl/26ayvV

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
// 步驟4-2大於0 故 2在4前面
// 步驟2-5小於0 故 2在5前面.....
console.log(numbers); // [1, 2, 3, 4, 5]

題目(4)加總所有inventor的在世時間：

• 使用reduce()來做加總，他可以與前一個回傳的值再次作運算 tatol + (year - passed)

//以前使用for迴圈寫法：
let totalYears = 0;
for (let i = 0; i < inventors.length; i++) {
    let liveYear = inventors[i].passed - inventors[i].year;
    totalYears += liveYear;
}
// ***reduce() 以及 array function寫法***
const tatol = inventors.reduce(function (total, inventor) {
      return total + (inventor.passed - inventor.year);
    }, 0);

• reduce()筆記：
  • reduce(function(total,value), initialTotal)
  • total 累加器是上一次呼叫後，所回傳的累加數值
  • value 陣列中正在處理的元素
  • initialTotal初始值
  • 詳細：https://goo.gl/wT1jLj

題目(5)年齡由大到小排序：

• 使用sort() 先算好年紀(passed - year) 再進行比較並且排序

const oldest = inventors.sort(function (a, b) {
        const last = a.passed - a.year;
        const next = b.passed - b.year;
        return last > next ? -1 : 1;
    });
    console.table(oldest);

題目(6)列出巴黎所有包含'de'的路名：

• 練習網址：https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
• 抓取className為mw-category裡面所有的a標籤，array.form()轉為真正陣列，使用map()抓取該標籤裡的文字，在使用filter()過濾有‘de’字樣的路名

const category = document.querySelector('.mw-category');
const links = Array.from(category.querySelectorAll('a'));
const de = links
            .map(link => link.textContent)
            .filter(streetName => streetName.includes('de'));

題目(7)依據lastName排序people的資料：

• people的陣列資料名，中間包含逗點，使用split() 好難唸ＸＤ，來判斷逗點並且切開成兩個陣列用[first, last]來接，再用sort進行排序

const alpha = people.sort((a, b) => {
    const [aLast, aFirst] = a.split(', ');
    const [bLast, bFirst] = b.split(', ');
    return aLast > bLast ? 1 : -1;
});

題目(8)分別計算data內每個值的數量：

• 先將obj初始值設為空陣列obj={} 並且判斷這個值是否有了，沒有的話就創立一個空的，有的話就相加

const transportation = data.reduce(function (obj, item) {
    if (!obj[item]) {
        obj[item] = 0;
    }
    obj[item]++;
        return obj;
}, {});

哇嗚 這次的東西有點多 之後這篇還是會陸續整理更新 >"<